<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
	<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			color:#666;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
		}
		.fitem label{
			display:inline-block;
			width:80px;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		var url;
		function newContact(){
			$('#dlg').dialog('open').dialog('setTitle','添加联系人');
			$('#fm').form('clear');
			url = '/contact/save';
		}
		function editContact(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','修改资料');
				$('#fm').form('load',row);
				url = '/contact/update';
			}
		}
		function saveContact(){
			$.post(url, $("#fm").serialize());
			$('#dlg').dialog('close');		
			$('#dg').datagrid('reload');	
			
		}
		function removeContact(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','Are you sure you want to remove this contact?',function(r){
					if (r){
						$.post('/contact/delete',{id:row.id},'json');
						$('#dg').datagrid('reload');
					}
				});
			}
		}
		
		function birthday(){
			var row = $('#dg').datagrid('getSelected');
			$.post('/birthday',{id:row.id},'json');
			window.location.href="/birthday"; 
			
		}
	</script>
</head>
<body>
	
	
	<table id="dg" title="My Users" class="easyui-datagrid" style="width:1000px;height:380px"
			url="/contact"
			toolbar="#toolbar" pagination="true"
			rownumbers="true" fitColumns="true" singleSelect="true">
		<thead>
			<tr>
				<th field="id" width="50">ID</th>
				<th field="name" width="50">Name</th>
				<th field="nickname" width="50">Nickname</th>
				<th field="sex" width="50">Sex</th>
				<th field="phone" width="50">Phone</th>
				<th field="email" width="50">Email</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newContact()">添加联系人</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editContact()">修改资料</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeContact()">删除联系人</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="birthday()">删除联系人</a>
	</div>
	
	<div id="dlg" class="easyui-dialog" style="width:400px;height:320px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">联系人信息</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<label>ID:</label>
				<input name="id" class="easyui-validatebox" readonly>
			</div>
			<div class="fitem">
				<label>用户名:</label>
				<input name="name" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>昵称:</label>
				<input name="nickname" class="easyui-validatebox" >
			</div>
			<div class="fitem">
				<label>性别:</label>
				<input name="sex" class="easyui-validatebox" >
			</div>
			<div class="fitem">
				<label>电话:</label>
				<input name="phone" class="easyui-validatebox" >
			</div>
			<div class="fitem">
				<label>Email:</label>
				<input name="email" class="easyui-validatebox" >
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveContact()">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div>
</body>
</html>